<template>
    <div class="description-create">
      <h1>创建描述</h1>
      <!-- 文字描述输入区 -->
      <div class="description-editor">
        <textarea v-model="newDescription" placeholder="请输入描述..."></textarea>
        <button @click="saveDescription">保存描述</button>
      </div>
  
      <!-- 心情标签选择 -->
      <div class="mood-tags-selector">
        <h2>选择心情标签</h2>
        <div class="tag-form">
          <input type="text" v-model="newTag.name" placeholder="新标签名称" class="tag-input" />
          <select v-model="newTag.emoji" class="tag-select">
            <option value="">选择表情</option>
            <option value="😄">开心</option>
            <option value="😢">伤心</option>
            <option value="😡">愤怒</option>
            <option value="😪">沮丧</option>
          </select>
          <button @click="addNewTag">添加标签</button>
        </div>
        <div class="tag-list">
          <div class="tag-item" v-for="tag in tags" :key="tag.id">
            {{ tag.emoji }} {{ tag.name }}
          </div>
        </div>
      </div>
    </div>
  </template>
  
<script>
export default {
  data() {
    return {
      newDescription: '',
      newTag: { name: '', emoji: '' },
      tags: []
    };
  },
  methods: {
    addNewTag() {
      if (!this.newTag.name || !this.newTag.emoji) return;
      this.tags.push({
        id: Date.now(),  // 使用时间戳作为ID
        name: this.newTag.name,
        emoji: this.newTag.emoji
      });
      this.newTag = { name: '', emoji: '' }; // 重置输入
    },
    saveDescription() {
      // 模拟发送数据到服务器的过程
      const postData = {
        description: this.newDescription,
        moodTags: this.tags
      };
      console.log('提交的数据:', postData);
      // 这里可以用 axios 或其他 HTTP 客户端实际发送数据
      alert('描述已保存');
    }
  }
};
</script>
  